<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人信息管理中心</title>
    <!--引用导航栏css样式-->
    <link rel="stylesheet" href="css/index.css">

    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>


    <style>
        .pic {
            position:relative;
            width: 40%;
            padding-top:40%;
        }
        .img{
            position:absolute;
            top:0;
            left:65px;
            width:100%;
            height:100%;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<!--侧边栏开始-->
<div class="page" id="app">
    <div class="nav-left" v-show="navLeftFlag" ref="navLeft">
        <div class="navDiv">

            <div class="nav-list">
                <div style="text-align: center">
                    <p class="pic">
                        <img class="img" src="./img/3.jpg">
                    </p>
                </div>
                <ul>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a" target="iframe"><i class='bx bx-layer'></i>个人中心
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="html/mypost.html" class="li-a-a" target="iframe">我的帖子</a>
                        </div>
                        <div class="nav-box">
                            <a href="html/mylike.html" class="li-a-a" target="iframe">我的点赞</a>
                        </div>
                        <div class="nav-box">
                            <a href="html/mycomment.html" class="li-a-a" target="iframe">我的评论</a>
                        </div>
                        <div class="nav-box">
                            <a href="html/user_amend.html" class="li-a-a" target="iframe">信息修改</a>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="navName"><a href="index.html">返回首页</a></div>
        </div>
    </div>


    <div class="nav-right" ref="navRight">
        <div class="content-page" ref="cPage">
            <iframe name="iframe" width="100%" height="100%" frameborder="0" src=""></iframe>
        </div>
    </div>
</div>

<!--引用导航栏-->
<script src="js/index_myhead.js"></script>
<script src="js/vue.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>


<script type="text/javascript">
    $(function () {
        let navflag = false;
        $('.nav-tab').click(function () {
            $(this).siblings().each(function () {
                $(this).removeClass('a_active');
                // $(this).removeClass('a_active');
                $(this).find('.nav-box').css('height', '0')
                //关闭右侧箭头
                if ($(this).attr('class').indexOf('nav-ul') != -1) {
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).removeClass('nav-show')
                    // $(this).find('div').removeClass('nav-box')
                }
            })
            //当前选中
            $(this).addClass('a_active')
            $(this).find('.li-a').addClass('active')
            // 打开右侧箭头
            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
            $(this).addClass('nav-show')
            // $(this).find('div').addClass('nav-box')
        })
        /* 二级菜单a点击事件 */
        $(".li-a-a").click(function () {
            $(".li-a-a").each(function () {
                $(this).removeClass('active-li-a');
            })
            $(this).addClass('active-li-a');
        })

    })
    const vue = new Vue({
        el: '#app',
        data: {
            navLeftFlag: true
        },
        methods: {
            isShowLeft() {
                if (this.navLeftFlag) {
                    this.$refs.navRight.style.paddingLeft = '0px'
                    this.$refs.cPage.style.left = '0px';
                    this.navLeftFlag = false;
                    // this.$refs.navLeft.style.width = '0px';
                    // setTimeout(()=>{
                    // 	this.navLeftFlag = false;
                    // },200)
                } else {
                    this.$refs.navRight.style.paddingLeft = '240px';
                    this.$refs.cPage.style.left = '240px';
                    this.navLeftFlag = true;
                    // this.$refs.navLeft.style.width = '240px';
                    // setTimeout(()=>{
                    // 	this.navLeftFlag = true;
                    // },200)
                }
            }
        }
    })
</script>
</body>
<script src="js/sidebar.js"></script>
</html>
